<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <link rel="icon" href="/images/闪电.ico" sizes="32x32">
    <title>后台管理</title>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7cd3e5b5274253178c805c4447a51941";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279472717'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279472717%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
<body id="body">
    <!--导航-->
    <div th:replace="~{admin/blogs::adminNav}"></div>
    <!--二级导航-->
    <div class="ui menu attached inverted ">
        <div class="ui container">
            <a href="/admin/types-input" class="item" >新增</a>
            <a href="/admin/types" class="active item">列表</a>
        </div>
    </div>
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <div  class="ui form segment inverted" >
                <div class="fields inline">
                    <div class="field">
                        <input type="text" name="name" placeholder="分类名称">
                    </div>
                    <div class="field right aligned">
                        <button class="ui small teal basic button" onclick="initialization()"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
            <div id="table-container">
                <table th:fragment="table_refresh" th:id="id_table_refresh"  class="ui table inverted celled center aligned" >
                    <thread>
                        <tr>
                            <th></th>
                            <th>分类名称</th>
                            <th>博客数量</th>
                            <th>更新时间</th>
                            <th>操作</th>
                        </tr>
                    </thread>
                    <tbody>
                    <tr th:each="type,iter:${types}">
                        <td th:text="${iter.index+1}">1</td>
                        <td th:text="${type.getName()}">一年总结</td>
                        <td th:text="${type.getNumber()}">3</td>
                        <td th:text="${#dates.format(type.getDate(),'yyyy-MM-dd')}">2020-7-04 15:12</td>
                        <td>
                            <a class="ui button  teal basic mini " th:href="@{'/admin/types-input/'+${type.getId()}}">编辑</a>
                            <a class="ui button  red basic mini " th:attr="data-id=${type.getId()}" onclick="deleteType(this)">删除</a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr >
                        <th colspan="6">
                            <div class="ui pagination menu mini">
                                <a  class="ui item " onclick="pre()">上一页</a>
                                <a class="ui item " onclick="next()">下一页</a>
                            </div>
                            <a href="/admin/types-input" class="ui mini right floated teal basic button">新增</a>
                        </th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部footer-->
    <div th:replace="~{index::footer}"></div>

<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/Semantic-UI-CSS-master/semantic.min.js"></script>

<script type="text/javascript">

    $("#b1").click(function (){
        $(".m-item").toggleClass("m-mobile-hide");
    });
    $('#payButton').popup({
    popup:$('.popup.payQR'),
    on:'click',
    position:'bottom center'
    });
    $('.ui.dropdown').dropdown({
        on: 'hover'
    })

    var currentPage=1;
    var size=6;
    var begin=0;

    function initialization() {
        begin=0;
        loadData();
    }
    function next() {
        currentPage++;
        begin+=size;
        loadData();
    }
    function pre() {
        if (begin>0){
            begin-=size;
            loadData();
        }
    }

    function loadData(){
        $.ajax({
            url:"/type",
            data:{"begin":begin,"size":size,name:$("[name='name']").val()},
            type:"get",
            success:function (result) {
                $("#table-container").html(result);
            }
        })
    }
    function deleteType(button) {
        $.ajax({
            url: "/type",
            data:{"id":$(button).attr("data-id")},
            type:"delete",

            success:function(result){
                $("body").html(result);
            }
        })
    }
</script>
<!--    <script src="https://myhkw.cn/player/js/player.js" id="myhk" key="160861313283" m="1"></script>-->
</body>
</html>